<script setup>
import { reactive } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
// 数据
const data = reactive({
  title: '系统通知',
  nodes: `系统通知内容系统通知内内容系统通知内容系统通知内内容系统通知内容系统通知内内容`,
})
onReady(() => {
  uni.setNavigationBarTitle({
    title: '系统通知'
  });
})
</script>

<template>
  <view class="message-detail-page">
    <view class="head">
      <view class="title">系统通知</view>
      <view class="time">2021-08-08</view>
    </view>
    <rich-text :nodes="data.nodes"></rich-text>
  </view>
</template>

<style lang="scss" scoped>
.message-detail-page {
  padding: 54rpx 34rpx;

  & .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 24rpx;
    margin-bottom: 24rpx;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background: #f5f5f5;
      width: 684rpx;
      height: 0rpx;
      border: 2rpx solid;
      opacity: 0.5;
      border-image: linear-gradient(270deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 1), rgba(217, 217, 217, 0)) 2 2;
    }

    & .title {
      font-weight: 500;
      font-size: 32rpx;
      color: #303133;
    }

    & .time {
      font-weight: 400;
      font-size: 24rpx;
      color: #838385;
    }
  }

  & rich-text {
    margin-top: 24rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #838385;
  }
}
</style>